En este momento, el botón de desactivación cuando el correo electrónico tiene el formato correcto ya funciona bien según mi código a continuación.
Escenario que quiero implementar:
¿Cómo abordamos eso en Angular? ¿Hay una forma o técnica más limpia para hacer eso?
<div fxLayout="column"> <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;"> <mat-label>Email</mat-label> <input type="email" matInput autocomplete="emailAddress" matInput formControlName="emailAddress" /> <mat-error *ngIf="modelForm.get('emailAddress').hasError('email')"> Email is in invalid format. </mat-error> <mat-error *ngIf="modelForm.get('emailAddress').hasError('required')"> Email is required. </mat-error> </mat-form-field> </div> <form (click)="getStarted()"> <div style="text-align:right;margin-top: 19.0px;"> <button [disabled]="modelForm?.get('emailAddress').invalid" mat-flat-button color="primary" class="v-btn-sml" id="get-started-button"> Get Started </button> </div> </form> ngOnInit(): void { this.initFormGroup(); } initFormGroup() { this.modelForm = this.formBuilder.group({ id: [this.model.id || 0], emailAddress:[this.model.emailAddress,[Validators.required, Validators.email]], firstName: [this.model.firstName,Validators.required], roleId: this.model.roleId, lastName: [this.model.lastName,Validators.required], phoneNumber: this.model.phoneNumber, companyName: [this.model.companyName,Validators.required], ssocredentials: this.model.ssocredentials || '', accountId: this.accountId, title: this.model.title, isSso: this.model.isSso || '', }); }Siempre puede incluir más funciones vinculando [deshabilitado] a una propiedad o función. Solo tenga en cuenta que no desea poner una lógica que consume mucho tiempo en la verificación deshabilitada, ya que angular lo ejecutará con mucha frecuencia. Aquí hay un ejemplo de lo que estoy describiendo.
HTML:
<button [disabled]="isDisabled" mat-flat-button color="primary" class="v-btn-sml" id="get-started-button"> Get Started </button> </div> </form>Mecanografiado
get isDisabled(): boolean { if (!this.modelForm.valid) { return true; } const vals = this.modelForm.value; return this.model.emailAddress == vals['emailAddress']; }Es posible que desee intentar usar una variable para que la aplicación sepa que se hizo clic en el botón. por ejemplo: submitted .
De forma predeterminada, el botón Comenzar está deshabilitado -> submitted=false
Si el usuario ingresa un correo electrónico válido en el tipo, el botón Comenzar se habilitará -> check if the form field is valid using formControls
Si el usuario hace clic en el botón Comenzar, después de hacer clic se desactivará -> submitted=true
El botón solo se habilitará nuevamente después de hacer clic si el usuario cambia la entrada en el campo de correo electrónico con una válida -> repeast the second one , después de enviar, restablezca el formulario para esta funcionalidad.
Puede lograrlo vinculando la propiedad disabled a dos indicadores, si alguno de ellos es verdadero, entonces el botón se deshabilitará:
modelForm?.get('emailAddress').invalidisDisabled (debe ser true de forma predeterminada para deshabilitarla), y se cambiará en dos eventos:false una vez que se haya cambiado el campo de correo electrónico (ngModelChange)="isDisalbed = false"true una vez que se ha hecho clic en el botón (es decir, dentro del método getStarted ).Puedes intentar algo como lo siguiente:
<form [formGroup]="modelForm"> <div fxLayout="column"> <mat-form-field class="full-width" appearance="fill" style="margin-top: 20px"> <mat-label>Email</mat-label> <input type="email" matInput autocomplete="emailAddress" matInput formControlName="emailAddress" (ngModelChange)="isDisalbed = false" /> <mat-error *ngIf="modelForm.get('emailAddress').hasError('email')"> Email is in invalid format. </mat-error> <mat-error *ngIf="modelForm.get('emailAddress').hasError('required')"> Email is required. </mat-error> </mat-form-field> </div> <div style="text-align: right; margin-top: 19px"> <button [disabled]="modelForm?.get('emailAddress').invalid || isDisabled" mat-flat-button color="primary" class="v-btn-sml" id="get-started-button" (click)="getStarted()"> Get Started </button> </div> </form>Y dentro de su clase de componente:
isDisabled = true; getStarted() { this.isDisabled = true; // your logic here }